<template>
  <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="visible" class="view" center>
    <div>
      <div class="listLi">
        <div class="leftContent">彩蛋名称:</div>
        <div>
          <p>{{chapterName}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">配置播放量:</div>
        <div>
          <p>{{chapterVisit}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">彩蛋音频:</div>
        <div>
          <p v-if="!showAudio">未上传</p>
          <p class="audioSpan">{{audioUrl}}</p>
          <p class="audioSpan" style="color:#00f">{{audioName}}</p>
          <audio v-if="showAudio" :src="audioUrl" controls="controls" id="myaudio"></audio>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">彩蛋内容:</div>
        <div>
          <p style="max-height:800px;overflow: auto;" v-html="content"></p>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="returns()" style="text-align:center">返回</el-button>
    </span>
  </el-dialog>
</template>
<style>
.inline {
  display: inline;
}
.types div {
  display: inline;
}
.ueditor-box {
  height: 230px;
}
</style>

<script>
import ueditor from "ueditor";
export default {
  data() {
    return {
      showAudio: false,
      showVideo: false,
      visible: false,
      id: "",
      chapterName: "",
      chapterDesc: "",
      chapterVisit: "",
      content: "",
      audioName: "",
      audioUrl: ""
    };
  },
  methods: {
    returns() {
      this.visible = false;
      var myAuto = document.getElementById("myaudio");
      if (myAuto) {
        myAuto.pause();
        myAuto.load();
      }
    },
    init(id) {
      this.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(`/colorEgg/eggChapter/info/${this.id}`),
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.id = data.bookChapter.id;
            this.chapterName = data.bookChapter.chapterName;
            this.chapterVisit = data.bookChapter.chapterVisit;
            this.content = data.bookChapter.content;
            this.audioUrl = data.bookChapter.audioUrl;
            this.audioName = data.bookChapter.audioName;
            // this.sourceInfo = JSON.parse(this.sourceInfo);
            // 先设置audio的src然后在渲染显示，这样就不会加载失败
            if (this.audioUrl) {
              this.showAudio = true;
            } else {
              this.showAudio = false;
            }
          }
        });
        // }
      });
    }
  }
};
</script>
<style scoped>
.listLi {
  display: flex;
  margin: 20px 0;
}
.leftContent {
  width: 140px;
  text-align: right;
  margin-right: 25px;
}
.listLi p {
  margin: 0 0 5px 0;
}
</style>
